<template>
	<view class="content-sys">
		
		<view class="head">
			<compSysHead v-if="sysData" :item="sysData"></compSysHead>
		</view>
		<view class="list">
			<compSysList v-if="sysData" :sysId="sysData?._id"></compSysList>
		</view>
		
		<!-- 背景动画元素 -->
		<view class="circle circle-1"></view>
		<view class="circle circle-2"></view>
		<view class="circle circle-3"></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import db from '@/api/database'
	import compSysHead from '@/pages/sys/comps/comp-sys-head.vue'
	import compSysList from '@/pages/sys/comps/comp-sys-list.vue'
	const sysData = ref()

	onLoad((options) => {
		getData(options.id)
	})

	async function getData(id) {
		try {
			const res = await db.collection('syslb').doc(id).get()
			sysData.value = res.data[0]
		} catch (error) {
			console.error('查询数据失败:', error)
		}
	}
	
	function goBack() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	@import "/static/css/iconfont.css";
	
	/* 关键帧动画定义 */
	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 0.8;
		}

		50% {
			transform: scale(1.05);
			opacity: 0.6;
		}

		100% {
			transform: scale(1);
			opacity: 0.8;
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.content-sys {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: linear-gradient(135deg, #ffffff 0%, #d1d6dd 100%);
		position: relative;
		overflow: hidden;
		animation: fadeIn 0.8s ease-out;
		
		.header-section {
			width: 100%;
			background: linear-gradient(135deg, #22c4ff, #2196f3);
			border-bottom-right-radius: 15px;
			border-bottom-left-radius: 15px;
			box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
			padding: 10px 0;
			z-index: 2;
			
			.nav-bar {
				display: flex;
				align-items: center;
				padding: 10px 15px;
				margin-top: 20px;
				
				.nav-left {
					display: flex;
					align-items: center;
					color: #fff;
					
					text {
						margin-left: 5px;
						font-size: 16px;
					}
				}
				
				.nav-title {
					flex: 1;
					text-align: center;
					color: #fff;
					font-size: 18px;
					font-weight: 500;
					margin-right: 30px;
				}
			}
		}

		.head {
			width: 95%;
			padding: 15px 0 5px;
			z-index: 1;
		}

		.list {
			width: 95%;
			padding: 10px 0;
			z-index: 1;
		}
	}
	
	/* 背景动画圆圈 */
	.circle {
		position: absolute;
		border-radius: 50%;
		background: linear-gradient(45deg, rgba(34, 196, 255, 0.2), rgba(33, 150, 243, 0.2));
		filter: blur(5px);
		z-index: 0;
	}

	.circle-1 {
		width: 500rpx;
		height: 500rpx;
		top: -150rpx;
		right: -100rpx;
		animation: pulse 8s infinite ease-in-out;
	}

	.circle-2 {
		width: 350rpx;
		height: 350rpx;
		bottom: 100rpx;
		left: -100rpx;
		animation: pulse 6s infinite ease-in-out 1s;
	}

	.circle-3 {
		width: 600rpx;
		height: 600rpx;
		bottom: -300rpx;
		right: 30%;
		animation: pulse 10s infinite ease-in-out 2s;
	}
</style>